import {
    Form,
    Input,
    Select,
    InputNumber,
    Button,
    Radio,
    Checkbox,
    Modal,
} from 'antd';

const FormItem = Form.Item;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const Option = Select.Option;

@Form.create()
export default class ZubieForm extends React.Component {

    state ={
        gameMethodDesc:'CO'
    }

    okHandle = () => {
        const {
            handleAdd,
            curProject: { projectCode, code, projectName },
            form,
        } = this.props;
        form.validateFields((err, fieldsValue) => {
            if (err) return;
            handleAdd(fieldsValue);
            
        });
    };

    getTitle = () => {
        const {
            curProject: {projectName },
            curData,
        } = this.props;
        if (projectName) {
            return projectName + '-添加组别';
        } else if (curData) {
            return curData.zubieName + '-修改组别';
        } else {
            return '';
        }
    };

    gameMethodChange = (value) => {
        
        this.setState({
            gameMethod : value.target.value,
        });
    }

    generateGameMethodDesc = (value) => {

        const {curData} = this.props;
        let gameMethod = 'CO'
        if(value){
            gameMethod = value; 
        }else if(curData){
            gameMethod = curData.gameMethod
        }
        let desc;
        switch(gameMethod){
            case 'CO':
            desc='比赛分多个阶段，默认生成分组循环和淘汰赛两个阶段，可按需求自行添加或修改阶段';
            break;
            case 'SC':
            desc = '单循环赛，只有一个阶段，所有选手轮循比赛，每两个选手必须且只能对阵一场，按胜场、胜次、净胜分确定名次';
            break;
            case 'SO':
            desc = '单淘汰赛，只有一个阶段，按抽签位置一对一淘汰，通过附加赛决三到八名';
            break;
            default:
            desc='请手动设置各阶段，可灵活设置各阶段比赛方式、局数、分制，适合正规赛制不能满足需求的比赛';
            break;
        }
        return desc;
    }

    render() {
        const {
            modalVisible,
            handleModalVisible,
            curProject: { projectCode, code, projectName },
            curData,
            form,
        } = this.props;

        return (
            <Modal
                title={this.getTitle()}
                width={700}
                destroyOnClose={true}
                visible={modalVisible}
                onOk={this.okHandle}
                onCancel={() => handleModalVisible()}
            >
                {(projectCode === 'MT' || projectCode === 'WT' || projectCode === 'HT') && (
                    <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="比赛方法">
                        {form.getFieldDecorator('gameMethod', {
                            rules: [{ required: true }],
                        })(
                            <RadioGroup>
                                <Radio value="TH">三场制</Radio>
                                <Radio value="FI">五场制</Radio>
                            </RadioGroup>
                        )}
                    </FormItem>
                )}
                {(projectCode === 'MS' ||
                    projectCode === 'WS' ||
                    projectCode === 'MD' ||
                    projectCode === 'WD' ||
                    projectCode === 'HD') && (
                        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="比赛方法" extra={this.generateGameMethodDesc(this.state.gameMethod)}>
                            {form.getFieldDecorator('gameMethod', {
                                rules: [{ required: true }],
                                initialValue: curData ? curData.gameMethod : "CO",
                            })(
                                <RadioGroup onChange={this.gameMethodChange}>
                                    <Radio value="SC">单循环赛</Radio>
                                    <Radio value="SO">单淘汰赛</Radio>
                                    <Radio value="CO">阶段赛</Radio>                                    
                                </RadioGroup>
                            )}
                        </FormItem>
                    )}

                {form.getFieldDecorator('gameProjectCode', {
                    rules: [{ required: true }],
                    initialValue: curData ? curData.gameProjectCode : code,
                })(<Input readOnly type="hidden" />)}
                {form.getFieldDecorator('id', {
                    rules: [{ required: false }],
                    initialValue: curData && curData.id,
                })(<Input readOnly type="hidden" />)}
                <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="组别名称">
                    {form.getFieldDecorator('zubieName', {
                        rules: [{ required: true, message: '请输入组别名称' }],
                        initialValue: curData && curData.zubieName,
                    })(<Input placeholder="请输入" />)}
                </FormItem>
                <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="最大人数" extra="最少4人，单淘汰赛和单循环赛最多目前支持1024人，阶段赛最多支持96人">
                    {form.getFieldDecorator('signMax', {
                        rules: [{ required: true, message: '请输入最大参赛人数' }],
                        initialValue: curData && curData.signMax,
                    })(<InputNumber style={{ width: '100%' }} min={4} max={1024} placeholder="请入输最大参赛人数" />)}
                </FormItem>
                
                <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="决出名次" extra="针对最后阶段为淘汰赛的赛事设置">
                    {form.getFieldDecorator('rankingCount', {
                        rules: [
                            { required: true, message: '请选择决出名次' },],
                        initialValue: curData ? ''+curData.rankingCount : '3',
                    })( <RadioGroup>
                        <Radio value="4">前四</Radio>
                        <Radio value="6">前六</Radio>
                        <Radio value="8">前八</Radio>
                    </RadioGroup>)}
                </FormItem>
                <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="比赛时段" extra="目前只显示，未做任何限制">
                    {form.getFieldDecorator('timePhase', {
                        rules: [{ required: true, message: '请选择比赛时段' }],
                        initialValue: curData && curData.timePhase,
                    })(<Select style={{ width: '100%' }} placeholder="请入选择比赛时段">
                        <Option value="one">全天</Option>
                        <Option value="two">上午/下午</Option>
                        <Option value="three">上午/下午/晚上</Option>
                    </Select>
                    )}
                </FormItem>

                <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="参赛条件" extra="目前只显示，未做任何限制">
                    {form.getFieldDecorator('signCondition', {
                        rules: [{ required: true, message: '请输入参赛条件' }],
                        initialValue: curData && curData.signCondition,
                    })(<TextArea rows={6} placeholder="请输入参赛条件" />)}
                </FormItem>
            </Modal>
        )
    }
}
